<script lang="ts">
export default {
  name: 'ScheduleAssistant',
};
</script>

<!-- 排班助手  -->

<script setup lang="ts">
import { computed } from 'vue';
import { ArrowUpIcon, RectangleIcon } from 'tdesign-icons-vue-next';

const props = defineProps({
  message: String,
  isLoading: Boolean,
});

// 使用计算属性实现双向绑定
const inputMessage = computed({
  get: () => props.message,
  set: (value) => emit('update:message', value),
});

const emit = defineEmits([
  'recover-event',
  'update:files',
  'update:inputs',
  'update:message',
  'send-message',
  'stop-message',
]);

const handleEnter = (value, context) => {
  if (context.e.key === 'Enter' && !context.e.shiftKey) {
    context.e.preventDefault(); // 阻止默认换行行为
    seedMessage();
  }
};

const seedMessage = () => {
  emit('update:inputs', { scene: '排班助手' });
  emit('update:files', []);
  emit('send-message');
};
</script>

<template>
  <div class="input-area-container">
    <t-col class="input-with-button">
      <div class="input-box">
        <t-tooltip content="点击退出场景" class="input-type-title">
          <div @click="emit('recover-event')"><t-icon name="chevron-left" />排班助手</div>
        </t-tooltip>
        <t-textarea
          v-model="inputMessage"
          placeholder="请先输入要排班的年月，如“2025年5-6月”，生成班表后再输入您的需求对班表进行调整。"
          :autosize="{ minRows: 1, maxRows: 12 }"
          @keypress="handleEnter"
        />
      </div>
      <div class="action-buttons">
        <t-button
          v-if="!isLoading"
          class="send-btn"
          :disabled="!message"
          shape="circle"
          theme="primary"
          @click="seedMessage"
        >
          <template #icon>
            <arrow-up-icon />
          </template>
        </t-button>
        <t-button v-else class="stop-btn" shape="circle" theme="primary" @click="$emit('stop-message')">
          <template #icon>
            <rectangle-icon style="background-color: white; font-size: 12px" />
          </template>
        </t-button>
      </div>
    </t-col>
  </div>
</template>

<style scoped lang="less">
@import url('../index.less');
</style>
